import React from 'react';
import { Empty, Icon, Tooltip } from 'antd';
import classNames from 'classnames';
import isEqual from 'lodash/isEqual';
import ScrollBar from '@/components/ScrollBar';
import styles from './stepList.less';

function StepList({ stepList }) {
  return stepList.length > 0 ? (
    <ScrollBar autoHide autoHeight autoHeightMin="56px">
      <div className={classNames(styles.steps)}>
        {stepList.map((item, index) => (
          <div className={styles.stepsItem}>
            <div
              className={classNames(styles.stepsItemIcon, [
                item.finished ? styles.finished : item.current ? styles.current : null,
              ])}
            >
              {item.finished ? (
                <Icon type="check" />
              ) : (
                <span className={styles.stepsNumber}>{index + 1}</span>
              )}
            </div>
            <div className={styles.stepsItemContent}>
              <Tooltip placement="topLeft" title={item.tacheName}>
                {item.finished || item.current ? (
                  <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>{item.tacheName}</span>
                ) : (
                  <span>{item.tacheName}</span>
                )}
              </Tooltip>
            </div>
            <div
              className={classNames(styles.stepsItemLine, [item.finished ? styles.lineFish : null])}
            />
          </div>
        ))}
      </div>
    </ScrollBar>
  ) : (
    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无流程数据" />
  );
}

export default React.memo(StepList, (prevProps, nextProps) => {
  return isEqual(prevProps, nextProps);
});
